@import "Reset.scss";
@import "../utils/iconfont.css";
@import "./Same_Style.scss";

body{
    width:Ant_Group(1451);
    overflow-x: hidden;
}

@function Ant_Group($w){
    @return($w / 1451) * 100 + vw;
};
@function font($w){
    @return($w / 1451) * 100 + vmin;
};

.cursorPoin{
    cursor: pointer !important;
    color: #1677FF !important;
}

.wrap{
    width: Ant_Group(1451);
    font-family: "PingFang SC";
    background-color: rgba(0,0,0,.04);
    // 头部
    header{
        @include header;
        background-color: #fff;     
        li{
            &:nth-child(2) > a{
                color: #1677FF !important;
            }
            a{
                color: #000 !important;
            }
        }
    }
    // 主体
    main{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // 轮播图
        .main_banner{
            width: 100%;
            margin-top: Ant_Group(80);
            height: Ant_Group(320);
            .swiper{
                width: 100%;
                height: 100%;
                .swiper-button-prev{
                    @include bannerBtn();
                    left: calc(50% - Ant_Group(565));
                    opacity: 0;
                    &::after{
                        content:"";
                    }
                    &:hover{
                        background-color: rgba(0, 0, 0, 0.3);
                    }
                }
                .swiper-button-next{
                    @include bannerBtn();
                    right: calc(50% - Ant_Group(565));
                    &::after{
                        content: "";
                    }
                    &:hover{
                        background-color: rgba(0, 0, 0, 0.3);
                    }
                }
            }
            position: relative;
            ul{
                width: 100%;
                height: 100%;
                display: flex;
                overflow: hidden;
                li{
                    width: 100%;
                    flex-shrink: 0;
                }
            }
        }
        // 主体顶部搜索模块
        .main_search_block{
            width: Ant_Group(1132);
            height: Ant_Group(132);
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: Ant_Group(20);
            // 搜索框
            .search_bar{
                display: flex;
                font-size: Ant_Group(16);
                .searchInput{
                    width: Ant_Group(852);
                    height: Ant_Group(48);
                    border-radius: Ant_Group(6) 0 0 Ant_Group(6);
                    border: Ant_Group(1.5) solid #d9d9d9;
                    padding: 0 Ant_Group(12);
                    font-size: Ant_Group(16);
                    outline: none;
                    transition: all 0.3s;
                    box-sizing: border-box;
                    color: rgba(0,0,0,0.65);
                    &:hover{
                        border-color: #4096ff;
                        box-shadow: 0 0 0 Ant_Group(2) rgb(22 119 255 / 20%);
                    }
                }
                .searchBtn{
                    width: Ant_Group(152);
                    height: Ant_Group(48);
                    background-color: #1677FF;
                    border-radius: 0 Ant_Group(6) Ant_Group(6) 0;
                    border: Ant_Group(1) solid rgba(22,119,255,1);
                    color: #fff;
                    outline: none;
                    font-weight: 700;
                    font-size: Ant_Group(16);
                    box-sizing: border-box;
                }
            }
            // 热门搜索
            .hot_search_info{
                align-self: flex-start;
                display: flex;
                margin: Ant_Group(20) 0 0 Ant_Group(64);
                a{
                    margin-right: Ant_Group(18);
                    color: #4096ff;
                    &:hover{
                        color: rgba(64, 150, 255,0.7);
                    }
                }
            }
        }
        // 主体筛选与职位模块
        .main_recruit_block{
            display: flex;
            margin: Ant_Group(20) 0 ;
            // 左边筛选块
            .left_screen_block{
                width: Ant_Group(269);
                height: Ant_Group(943);
                background-color: #fff;
                margin-right: Ant_Group(20);
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: Ant_Group(24) Ant_Group(32);
                box-sizing: border-box;
                // 标题
                .screen_block_title{
                    width: Ant_Group(205);
                    height: Ant_Group(32);
                    line-height: Ant_Group(32);
                    display: flex;
                    justify-content: space-between;
                    span{
                        &:first-child{
                            font-size: Ant_Group(20);
                            font-weight: 500;
                        }
                    }
                    .clearBtn{
                        font-size: Ant_Group(14);
                        font-weight: 400;
                        color: rgba(0,0,0,0.25);
                        border: none;
                        background-color: #fff;
                        cursor: not-allowed;
                    }
                }
                // 工作地点
                .work_place{
                    @include city_and_job;
                    cursor: pointer;
                    p{
                        i{
                            font-weight: bold;
                            &:first-child{
                                display: none;
                            }
                        }
                        
                    }
                }
                .citys_box{
                    max-height: Ant_Group(379);
                    transition: max-height 0.3s;
                    // 工作城市选择框
                    .work_city{
                        width: Ant_Group(205);
                        height: Ant_Group(340);
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        font-weight: 400;
                        font-size: Ant_Group(14);
                        ul{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            li{
                                display: flex;
                                align-items: center;
                                color: rgba(0,0,0,0.65);
                                label{
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                }
                                input{
                                    width: Ant_Group(18);
                                    height: Ant_Group(18);
                                    transition: all 0.2s;
                                    border: rgba(230, 225, 225, 0.1);
                                    box-sizing: border-box;
                                    outline: none;
                                    margin-right: Ant_Group(8);
                                    &:focus{
                                        border:Ant_Group(1) solid #4096ff;
                                    }
                                }
                            }
                        }
                    }
                }
                // 更多
                .more_citys{
                    width: Ant_Group(205);
                    height: Ant_Group(39);
                    position: relative;
                    display: flex;
                    align-items: center;
                    margin: Ant_Group(10);
                    .more_citys_btn{
                        font-size: Ant_Group(14);
                        color: #4096ff;
                        background-color: #fff;
                        border: none;
                        outline: none;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span{
                            margin-left: Ant_Group(-2);
                            &:last-child{
                                margin-left: Ant_Group(7);
                            }
                        }
                    }
                }
                // 职位类别标题
                .job_ategory{
                    @include city_and_job;
                    margin:Ant_Group(49) 0 Ant_Group(24) 0 ;
                    position: relative;
                    cursor: pointer;
                    &::after{
                        content: "";
                        position: absolute;
                        width: Ant_Group(205);
                        height: Ant_Group(0);
                        border: Ant_Group(0.5) solid rgba(0,0,0,0.06);
                        top: Ant_Group(-35);
                    }
                    p{
                        i{
                            font-weight: bold;
                            &:first-child{
                                display: none;
                            }
                        }
                        
                    }
                }
                // 职位类别选择框
                .job_ategory_select{
                    max-height: Ant_Group(379);
                    @include city_and_job;
                    margin: 0;
                    height: Ant_Group(374);
                    transition: max-height 0.2s;
                    overflow: hidden;
                    ul{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        // overflow: auto;
                        li{
                            display: flex;
                            align-items: center;
                            color: rgba(0,0,0,0.65) !important;
                            span{
                                i{
                                    font-size: Ant_Group(0.5);
                                }
                            }
                            label{
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                            }
                            input{
                                width: Ant_Group(18);
                                height: Ant_Group(18);
                                transition: all 0.3s;
                                border: rgba(230, 225, 225, 0.1);
                                box-sizing: border-box;
                                outline: none;
                                margin:0 Ant_Group(8);
                                &:focus{
                                    border:Ant_Group(1) solid #4096ff;
                                }
                            }
                        }
                    }
                }
            }
            // 右边职位块
            .right_job_block{
                width: Ant_Group(843);
                // height: Ant_Group(1033);
                background-color: #fff;
                padding: Ant_Group(24) 0 0;
                box-sizing: border-box;
                // 职位标题
                .job_block_title{
                    text-align: left;
                    margin: 0 Ant_Group(32) Ant_Group(15);
                    span{
                        &:first-child{
                            font-size: Ant_Group(20);
                            font-weight: bold;
                            margin-right: Ant_Group(8);
                        }
                        &:last-child{
                            display: inline-block;
                            font-size: Ant_Group(12);
                            color: #1677FF;
                            width: Ant_Group(31);
                            height: Ant_Group(22);
                            text-align: center;
                            line-height: Ant_Group(22);
                            border-radius: Ant_Group(10);
                            background: rgba(235,243,255,1);
                        }
                    }
                }
                .job_infoBox{
                    width:100%;
                    cursor: pointer;
                    // 职位信息
                    .job_info_container{
                        width: 100%;
                        padding: 0 Ant_Group(32) 0 ;
                        box-sizing: border-box;
                        &:hover{
                            background-color: rgba(0,0,0,0.02);
                        }
                        &:hover .job_block_info > .info_summary .open_btn{
                            display: block;
                        }
                        &:hover .job_block_info > .info_title > a{
                            color: #1677FF;
                        }
                        .job_block_info{
                            width: 100%;
                            padding: Ant_Group(16) 0 ;
                            border-bottom: Ant_Group(1) solid #f0f0f0;
                            // 信息标题
                            .info_title{
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                    a{
                                        width: Ant_Group(400);
                                        font-size: Ant_Group(16);
                                        font-weight: 400;
                                        line-height: Ant_Group(22);
                                        color: #000;
                                    }
                                .info_title_spanText{
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    span{
                                        font-size: Ant_Group(14);
                                        font-weight: 400;
                                        color: #999999;
                                        &:first-child{
                                            margin-right: Ant_Group(8);
                                        }
                                    }
                                }
                            }
                            // 职位概述
                            .info_summary{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-top: Ant_Group(11);
                                .info_summary_span{
                                    font-size: Ant_Group(14);
                                    span{
                                        color: #666;
                                        &:nth-child(3){
                                            margin: 0 Ant_Group(10);
                                            color: rgba(0,0,0,.15);
                                        }
                                        i{
                                            font-size: Ant_Group(14);
                                            margin-right: Ant_Group(4);
                                            color: rgba(0,0,0,0.4);
                                        }
                                    }
                                }
                                .expand_btn{
                                    cursor: pointer;
                                    border-radius: Ant_Group(2);
                                    border: none;
                                    background-color: rgba(0,0,0,.04);
                                    color: #8a99af;
                                    display: none;
                                    &:hover{
                                        color: #1677ff;
                                        background: #ebf3ff;
                                        transition: .2s;
                                    }
                                    span{
                                        pointer-events: none;
                                        font-size: Ant_Group(12);
                                        i{
                                            font-size: Ant_Group(12);
                                            pointer-events: none;
                                        }
                                    }
                                }
                            }
                            // 职位详细介绍
                            .info_detailed_introduction{
                                width: 100%;
                                padding: Ant_Group(12) 0 0;
                                display: none;
                                .detailed_introduction_container{
                                    width: 100%;
                                    margin-top: Ant_Group(12);
                                    // 职位描述
                                    .job_description{
                                        margin-bottom: Ant_Group(24);
                                        color: #999;
                                        font-size: Ant_Group(14);
                                        line-height: Ant_Group(22);
                                        &  p{
                                            margin-bottom: Ant_Group(8);
                                            color: #333;
                                        }
                                        & > div:nth-child(2) > p{
                                            margin-top: Ant_Group(24);
                                        }
                                    }
                                    // 投递/收藏功能块
                                    .ribbon{
                                        width: 100%;
                                        display: flex;
                                        align-items: center;
                                        cursor: pointer;
                                        // 投递按钮
                                        .send_btn{
                                            height: Ant_Group(40);
                                            margin-right: Ant_Group(25);
                                            border:Ant_Group(1) solid #1677ff;
                                            background: #1677ff;   
                                            padding:Ant_Group(4) Ant_Group(14);
                                            border-radius: Ant_Group(6);
                                            color: #fff;
                                            cursor: pointer;
                                            &:hover{
                                                border-color: #4096ff;
                                                background: #4096ff;
                                            }                 
                                        }
                                        // 收藏
                                        .collection{
                                            display: flex;
                                            align-items: center;
                                            color: rgba(0,0,0,.65);
                                            font-size: Ant_Group(14);
                                            span{
                                                i{
                                                    margin-right: Ant_Group(6);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                // 底部页码
                .job_block_pagination{
                    width: 100%;
                    margin: Ant_Group(24) 0;
                    display: flex;
                    justify-content: flex-end;
                    cursor: pointer;
                    .cursorNot{
                        cursor: not-allowed;
                    }
                    ul{
                        display: flex;
                        li{
                            display: flex;
                            align-items: center;
                            margin-right: Ant_Group(8);
                            .pagination_left_btn{
                                width: Ant_Group(32);
                                height: Ant_Group(32);
                                outline: none;
                                border: none;
                                border-radius: Ant_Group(6);
                                &:hover > span > i{
                                    color: #1677ff;
                                }
                                span{
                                    i{
                                        font-size: Ant_Group(14);
                                        color: #999999;
                                    }
                                }
                            }
                            a{
                                display: inline-block;
                                width: Ant_Group(32);
                                height: Ant_Group(32);
                                font-size: Ant_Group(16);
                                line-height: Ant_Group(32);
                                text-align: center;
                                color: #999999;
                                background: rgba(246,247,247,1);
                                border-radius: Ant_Group(6);
                            }
                            .pageNum:hover{
                                color: #1677ff;
                            }
                            .pagination_right_btn{
                                width: Ant_Group(32);
                                height: Ant_Group(32);
                                outline: none;
                                border: none;
                                border-radius: Ant_Group(6);
                                &:hover > span > i{
                                    color: #1677ff;
                                }
                                span{
                                    i{
                                        font-size: Ant_Group(14);
                                        color: #999999;
                                    }
                                }
                            }
                        }
                        .active{
                            background-color: #1677FF;
                            color: #fff;
                            &:hover{
                                color: #fff !important;
                            }
                        }
                    }
                }
            }
        }
    }
    // 底部
    footer{
        width: 100%;
        height: Ant_Group(253);
        background-color: rgba(28,37,51,1);
        display: flex;
        flex-direction: column;
        color: rgba(255,255,255,0.6);
        font-style: Ant_Group(12);
        font-weight: 300;
        // 底部地址、咨询、关注模块
        .footer_top{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            .footer_top_content{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: Ant_Group(51) 0;
                border-bottom: Ant_Group(1) solid rgba(255,255,255,0.1);
                // 地址
                .footer_top_address{
                    @include footerInfo;
                }
                // 咨询
                .footer_top_consult{
                    @include footerInfo;
                }
                // 关注
                .footer_top_aboutUs{
                    width: Ant_Group(295);
                    height: Ant_Group(90);
                    h2{
                        font-size: Ant_Group(16);
                        color: #fff;
                        font-weight:bold;
                    }
                    // icon图标模块
                    .aboutUs_iconGroup{
                        position: relative;
                        display: flex;
                        margin-top: Ant_Group(33);
                        .aboutUs_iconItem{
                            width: Ant_Group(32); 
                            margin-right: Ant_Group(18);
                        }
                        // 图标hover
                        .wechat{
                            &:hover~.wechat_QR_code{
                                display: block;
                            }
                        }
                        .weibo{
                            &:hover~.weibo_QR_code{
                                display: block;
                            }
                        }
                        .maimai{
                            &:hover~.maimai_QR_code{
                                display: block;
                            }
                        }
                        // 二维码
                        .wechat_QR_code{
                            @include QR;
                            &::after{
                                @include QR_after;
                            }
                        }
                        .weibo_QR_code{
                            @include QR;
                            left: -9px;
                            // display: none;
                            &::after{
                                @include QR_after;
                            }
                        }
                        .maimai_QR_code{
                            @include QR;
                            left:40px;
                            &::after{
                                @include QR_after;
                            }
                        }
                    }
                }
            }
        }
        // 底部经营许可信息栏
        .footer_bottom{
            width: 100%;
            height: Ant_Group(66);
            display: flex;
            justify-content: center;
            align-items: center;
            p{
                padding: Ant_Group(8);
                position: relative;
                &:nth-child(1)::after{
                    @include footer_p_after;
                }
                &:nth-child(2)::after{
                    @include footer_p_after;
                }
            }
        }
    }
}